<template>
  <div class="clientType">
    <el-card class="box-card" shadow="always">
      <div slot="header" class="header">
        <span>设备基本信息</span>
      </div>
      <global-card>
        <template #leftTitle>
          <el-button type="primary" @click="goBack">返回</el-button>
          <el-button
            v-if="deviceCode"
            type="primary"
            icon="el-icon-plus"
            @click="newQuipmentClick"
            >添加参数</el-button
          >
          <el-button type="success" icon="el-icon-refresh" @click="refresh"
            >刷新</el-button
          >
        </template>
        <template #content>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%"
            class="elTable"
            ref="tableRef"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            />
            <el-table-column
              prop="configName"
              label="规则名称"
              align="center"
            />
            <!-- <el-table-column prop="deviceName" label="数据" align="center" /> -->
            <el-table-column
              prop="configCode"
              label="协议code"
              align="center"
            />
            <el-table-column prop="createTime" label="创建时间" align="center">
              <!-- <template slot-scope="scope">
                {{ scope.row.createTime }}
              </template> -->
            </el-table-column>

            <el-table-column label="操作" width="350" align="center">
              <template #default="{ row }">
                <el-button type="warning" size="mini" @click="handlerEdit(row)"
                  >编辑</el-button
                >
                <el-button type="danger" size="mini" @click="handlerDelete(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template #footer>
          <pagination
            class="pagination"
            :total="count"
            :page.sync="pageIndex"
            :limit.sync="pageSize"
            @pagination="pagination"
          />
        </template>
      </global-card>
    </el-card>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
import {
  queryPageDevice,
  addDevice,
  deleteDeviceById,
  updateDevice
} from "@/api/clientOrObject/device"
import {
  queryPageDeviceConfigMain,
  deleteDeviceConfigMain
} from "@/api/clientOrObject/reportMessage"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      formatDate: "yyyy-MM-dd",
      count: 0,
      isGlobalMessageShow: false,
      message: "",
      pageIndex: 1,
      pageSize: 20,
      loading: false,
      deviceCode: "",
      tableData: []
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.deviceCode = this.$route.query.deviceCode
    this.getPageProject()
    console.log(this.$route.query, "this.$route.query")
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    newQuipmentClick() {
      this.$router.push({
        path: "/clientOrObject/reportMessageDetail",
        query: { deviceCode: this.deviceCode }
        // query: row
      })
    },
    async getPageProject(pageIndex = 1, pageSize = 20) {
      this.loading = true
      // projectType
      const { object } = await queryPageDeviceConfigMain({
        pageIndex,
        pageSize,
        deviceCode: this.deviceCode
      })

      this.count = object.count
      this.tableData = object.data
      console.log(this.tableData, " this.tableData ")

      this.loading = false
    },
    receive() {
      this.isGlobalMessageShow = false
    },

    pagination(pageItem) {
      this.getPageProject(pageItem.page, pageItem.limit)
    },
    refresh() {
      this.getPageProject()
    },
    handlerEdit(row) {
      this.$router.push({
        path: "/clientOrObject/reportMessageDetail",
        query: { deviceCode: this.deviceCode, ...row }
        // query: row
      })
      console.log(row)
    },
    handlerDelete({ id }) {
      this.$confirm("确定删除此用户吗", "删除操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(async () => {
        const { status } = await deleteDeviceConfigMain({
          id,
          deviceCode: this.deviceCode
        })
        if (status == 200) {
          console.log(id)
          this.getPageProject()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.clientType {
  .title-container {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;

    .left-box {
      display: flex;

      .formClass {
        display: flex;
        margin-right: 20px;
        .el-form-item {
          margin-top: 20px;
          margin-bottom: 0;
          .el-input {
            width: 216px;
          }
          .el-select {
            width: 171px;
            margin-left: 10px;
          }
          .el-date-editor {
            width: 336px;
            margin-left: 10px;
          }
        }
      }
      .el-button {
        // width: 42px;
        height: 36px;
        margin-top: 20px;
      }
    }
  }
}
.header {
  span {
    font-weight: 800;
    font-size: 20px;
  }
}
</style>
